﻿{config_load 'layout.conf' 'slider'}

<script type="text/javascript">

	function modeVideo(){
			$("#conf_slider").attr('class', $("#slider_type").val());
	}
		
	function addLigne(){
		if($('.conf_slider_element').length < 4){
			var new_element = "<div class='conf_slider_element'>";
			new_element = new_element + "<input class='slider_video' type='checkbox' name='slider_video' value='on'/>";
			{foreach $conf->values['content.def']['slider'] as $def }
				{if !$def|contains:'video'}
					new_element = new_element + "<input type='text' class='slider_{$def}' name='slider_{$def}' value='' /> ";
				{/if}
			{/foreach}
			new_element = new_element + "<img src'' width='50px'/><a href='#' class='delete_slider'><img src='{$contextpath}/img/delete.png'>Supprimer cet élément</a></div>";
	
			$('#conf_slider').append( new_element );
			
			modeVideo();
		}
	}
	
	{literal}
	
	function clickFileTree(elementfocus){
		
		$('#fileexplorer').fileTree({
				root: '/',
				fileEvent: 'dblclick'
			},
			function(file){
				elementfocus.val(file);
				elementfocus.next().attr("src","files/"+file)
				$( "#fileexplorer" ).dialog( "close" );
		});
		
		$("#fileexplorer:ui-dialog" ).dialog( "destroy" );
		
		if(!(elementfocus.parent().children()).is(":checked") || !($("#slider_type").val() == "photo-video") ){
			$( "#fileexplorer" ).dialog( {
				modal: true,
				width: '750',
				height: '400',
				buttons: {
					"Annuler": function() {
						$( this ).dialog( "close" );
					}
				}
			
			});
		}
	}
	function bindSlider() {
		$('.slider_image').bind('click', function(){
			clickFileTree($(this));
		});
	
		$('.delete_slider').click(function(){
			$(this).parent().remove();
		});
	}
	function slider_open(){
		modeVideo();
		bindSlider();
		$('#conf_slider').sortable({
			axis: 'y',
			placeholder: 'item-placeholder'
		});
		$('.add_slider').click(function(){
			addLigne();
			bindSlider();
		});
		$('#slider_type').change(function(){
			modeVideo();
		});
	}
	function slider_validate(){
		return true;
	}
	function slider_close(){	
		return true;
	}	
	{/literal}
</script>

	{assign var="indexOfPipe" 		value=$conf->values['content.def']['slider'][0]|strpos:"|"}		
	{assign var="valuestr" 			value=$conf->values['content.def']['slider'][0]|substr:($indexOfPipe+1)}			
	
	{assign var="values" value=","|explode:$valuestr}
	{assign var="labelkey" value=$conf->values['content.def']['slider'][0]|substr:0:$indexOfPipe}
	

	<label for="slider_{$labelkey}">{#$labelkey#|default:$labelkey}</label>
	<select id="slider_{$labelkey}" name="slider_{$labelkey}">
		{html_options values=$values output=$values selected=$content->slider[$labelkey]|default:""}
	</select><br/>

<ul id="conf_slider">



{if !empty($content->slider['title'])}
	{foreach $content->slider['title'] as $slider}
		<li class="conf_slider_element">
			<span class="icon-move"></span>
			<input class="slider_video" type="checkbox" name="slider_video" {if ($content->slider['video'][$slider@index] == "on")}checked='checked'{/if} />
		{foreach $conf->values['content.def']['slider'] as $def }
			{if !$def|contains:'video'}
				<input type="text" class="slider_{$def}" name="slider_{$def}" value="{$content->slider[$def][$slider@index]|default:""}"/>
			{/if}
		{/foreach}
			<img src="files{$content->slider['image'][$slider@index]|default:''}" width="50px"/>
			<a href="#" class="delete_slider"><img src="{$contextpath}/img/delete.png">Supprimer</a>
		</li>
	{/foreach}
{else}
	<li class="conf_slider_element">
		<input class="slider_video" type="checkbox" name="slider_video"/>
	{foreach $conf->values['content.def']['slider'] as $def }
		{if !$def|contains:'video'}
			<input type="text" class="slider_{$def}" name="slider_{$def}" value="{$content->slider[$def][$slider@index]|default:""}"/>
		{/if}
	{/foreach}
		<img src="files{$content->slider['image'][$slider@index]|default:''}" width="50px"/>
		<a href="#" class="delete_slider"><img src="{$contextpath}/img/delete.png">Supprimer</a>
	</li>
{/if}
	
</ul>
<a href="#" class="add_slider"><img src="{$contextpath}/img/add.png">Ajouter un élément</a>

<div id="fileexplorer" style="display:none;">
</div>